<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            margin-top: 20px;
            width: 800px;
            border: 1px solid #ddd;
            border-collapse: collapse;
        }

        td,
        th {
            border: 1px solid #ddd;
            padding: 5px 10px;
        }

        td {
            padding: 0;
            height: 30px;
        }

        td input {
            width: 100%;
            height: 30px;
            border: none;
            background-color: #ffc;
        }
    </style>
</head>
<body>
    <label for="username">姓名</label>
    <input type="text" id="username" name="username">
    <label for="age">年龄</label>
    <input type="text" id="age" name="age">
    <label for="tel">电话</label>
    <input type="text" id="tel" name="tel">
    <label for="qq">QQ号</label>
    <input type="text" id="qq" name="qq">
    <button id="btnSave">保存</button>
    <div class="list">
        <table id="tableList">
            <thead>
                <tr>
                    <th width="40">序号</th>
                    <th width="160">姓名</th>
                    <th width="60">年龄</th>
                    <th width="160">电话</th>
                    <th width="160">QQ号</th>
                    <th width="60">操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>


        <script>
            window.onload = function(){
                //获取页面元素
                var username = document.getElementById('username')
                var age = document.getElementById('age')
                var tel = document.getElementById('tel')
                var qq = document.getElementById('qq')
                var btnSave = document.getElementById("btnSave")
                var tableList = document.getElementById('tableList')
                var tbody = tableList.children[1]

                //序号
                var index = 1

                // 点击保存按钮生成表格
                btnSave.onclick = function(){
                    //生成一行
                    var tr = document.createElement('tr')


                    //给可编辑的表格添加class名 name
                    tr.innerHTML = '<td>' + index++ + '</td><td class = "name">' + username.value + '</td><td class = "name">' + age.value + '</td><td class = "name">' + tel.value + '</td><td class = "name">' + qq.value + '</td><td><button class = "btnDel">删除</td>'

                    //往表格里添加行
                    tbody.appendChild(tr)

                    //获取删除按钮
                    var btnDel = document.getElementsByClassName('btnDel')

                    // 绑定点击事件，移出tr
                    for(var i = 0;i < btnDel.length;i++){
                        btnDel[i].onclick = function(){
                            tbody.removeChild(this.parentNode.parentNode)
                        }
                    }

                    // 创建一个标识 识别td中是否有input 元素

                    var flag = false
                    //获取class 名为name 的td 绑定点击事件 编辑表格

                    var $name = document.querySelectorAll('.name')
                    //绑定点击事件 编辑内容
                    $name.forEach(function(item,index){
                        item.onclick = function(){
                            // 判断td中没有input 就添加input
                            if(!flag){
                                var input = document.createElement('input')

                                // 拿到原来td的内容 给到input
                                input.value = item.innerHTML;
                                // 把td的内容清空
                                item.innerHTML = ''
                                // 把input添加到 点击的这个元素中
                                item.appendChild(input);

                                // input自动获取焦点
                                input.focus();
                                // 添加input元素之后 把这个标识改为true，表示已经有input了
                                flag = true
                            }

                            // 当input失去焦点的时候 ，移出input元素 ，并且input的内容给到td
                            input.onblur = function () {
                                // 当失去焦点 移出input之后，把标识改为 false，表示 td中没有input元素了

                                flag = false
                                // item.innerHTML = input.value
                                // 拿input.value 来替换 item的所有内容
                                item.innerHTML = input.value

                           }
                       }
                    })
                }



















            }
        </script>
</body>
</html>